<template>
  <div class="setgray rounded">
    <div
      class="img-box position-relative"
      lazy
      :style="`background-image: url(${item.imgUrl});`"
      @mouseenter="show = true"
      @mouseleave="show = false"
    >
      <div class="img-box-search-inp" v-show="show" @click="openMask"></div>
      <router-link
        :to="{ name: 'workDetail', query: { id: item.id } }"
        class="d-block w-100 h-100"
      >
        <div
          class="position-absolute d-flex"
          style="top: 5px; left: 5px; z-index: 100"
        >
          <div class="icon-work-hot"></div>
          <div class="icon-work-tuijian"></div>
        </div>
        <a href="#"></a>
      </router-link>
    </div>
    <div class="great">
      <span class="icon1"></span>{{ item.see }} <span class="icon2"></span
      >{{ item.love }}
    </div>
    <div class="title text-dark">{{ item.name }}</div>
    <div class="author">
      <div>
        <a href="#"><img :src="item.artist.pic" alt="" /></a>
        <router-link to="/">
          <span>{{ item.artist.name }}</span>
          <span class="icon3"></span>
        </router-link>
      </div>
      <span>{{ getTime() }}</span>
    </div>
    <div class="mask position-fixed" v-if="showMask" @touchmove.prevent>
      <comp-mask @close="closeMask" :item="item"></comp-mask>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import compMask from "./comp-mask.vue";

export default {
  components: { compMask },
  props: {
    item: {
      type: Object,
    },
  },
  data() {
    return {
      show: false,
      t: this.item.time,
      showMask: false,
    };
  },
  computed: {
    getTime() {
      return function () {
        let t = new Date(this.t).getTime();
        let d = Date.now();
        let time = d - t;
        let second = time / 1000;
        let day = Math.floor(second / 3600 / 24);
        let hours = Math.floor((second / 3600) % 24);
        let minutes = Math.floor((second / 60) % 60);
        if (day < 1) {
          return `${hours}小时前`;
        } else if (hours < 1) {
          return `${minutes}分钟前`;
        } else if (day > 1) {
          return `${day}天前`;
        }
      };
    },
    ...mapState(["worksModule"]),
  },
  methods: {
    showDail(v1) {
      // this.$router.push({ path: "/work/view", query: { id: v1 } });
    },
    openMask(event) {
      this.showMask = true;
    },
    closeMask(v) {
      this.showMask = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";
[class^="icon"] {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 3px;
  margin-right: 4px;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  vertical-align: -2px;
}
@bgc: #f8f9fa;
.img-box {
  // width: 240px;
  height: 200px;
  background-size: cover;
  border-radius: 8px;
  .img-box-search-inp {
    top: 5px;
    right: 5px;
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: #fff;
    background-image: url(http://www.gracg.com/_templates/css/search.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
  }
  .icon-work-hot {
    width: 22px;
    height: 22px;
    background-image: url(https://qiniucssjs.gracg.com/work_hot.png);
    background-size: 22px;
    background-repeat: no-repeat;
    border-radius: 100%;
  }
  .icon-work-tuijian {
    width: 22px;
    height: 22px;
    background-image: url(https://qiniucssjs.gracg.com/work_tuijian.png);
    background-size: 22px;
    background-repeat: no-repeat;
    border-radius: 100%;
  }
}

.great {
  font-size: 14px;
  color: #666;
  padding: 6px 5px;
  background-color: @bgc;
  .icon1 {
    background-image: url(https://qiniucssjs.gracg.com/see.png);
  }
  .icon2 {
    background-image: url(https://qiniucssjs.gracg.com/like.png);
  }
}
.title {
  font-size: 14px;
  font-weight: bolder;
  background-color: @bgc;
  padding: 0px 6px 6px 6px;
}
.author {
  height: 30px;
  line-height: 20px;
  padding: 0 5px 5px;
  display: flex;
  justify-content: space-between;
  background-color: @bgc;
  padding: 0px 6px 6px 6px;
  a {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    margin-right: 10px;
    padding-bottom: 10px;
    color: #666;
    &:first-child {
      img {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .icon3 {
      background-image: url(http://www.gracg.com/_templates/css/icon_rz/star.png?);
    }
  }

  span {
    font-size: 14px;
    line-height: 30px;
    color: #666;
  }
}
.mask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 10000;
}
</style>